import DrawerFooter from '@/components/DrawerFooter';
import { Button, Form, Input, DatePicker2 } from '@alifd/next';
import { t } from '@lingui/macro';
import React, { useEffect, useState } from 'react';

const FormItem = Form.Item;

function ChargeDayForm({ data: origin, onSubmit, onCancel }) {
  const [data, setData] = useState('');

  useEffect(() => {
    const params = origin;
    const { time } = params;
    const timeArr = time?.split('~');
    params.time = timeArr;
    setData(params);
  }, []);

  const handleTimePicker = (e, v) => {
    setData({ ...data, time: v });
  };

  const handlePrice = (v) => {
    setData({ ...data, rmb: v });
  };

  const handleOnSubmit = (v, e) => {
    if (!_.isEmpty(e)) {
      return;
    }
    onSubmit(data);
  };

  return (
    <Form
      labelAlign="top"
      fullWidth
      value={data}
      onSubmit={onSubmit}
    >
      <FormItem
        label={t`时间段`}
        name="time"
        required
        requiredMessage={t`时间段不能为空`}
      >
        <DatePicker2.RangePicker format="MM-DD" minuteStep={10} onChange={handleTimePicker} />
      </FormItem>
      <FormItem
        label={t`费用价格`}
        name="rmb"
        required
        requiredMessage={t`费用价格不能为空`}
      >
        <Input placeholder={t`请输入费用价格`} onChange={handlePrice} />
      </FormItem>
      <DrawerFooter>
        <FormItem>
          <Form.Submit validate type="primary" onClick={handleOnSubmit}>{t`保存`}</Form.Submit>
          <Button style={{ marginLeft: 8 }} onClick={onCancel}>{t`取消`}</Button>
        </FormItem>
      </DrawerFooter>
    </Form>
  );
}

export default ChargeDayForm;
